<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="登录账号：" prop="loginId">
          <el-input v-model="search.loginId" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="用户名称：" prop="name">
          <el-input v-model="search.userName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户类型：" prop="userType">
          <el-select v-model="search.userType">
            <el-option
              v-for="item in controlData.userTypes"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="是否启用：" prop="isEnabled">
          <el-select v-model="search.isEnabled" clearable>
            <el-option
              v-for="item in enabledOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门：" prop="name">
          <el-cascader
            v-model="searchDeptId"
            clearable
            filterable
            placeholder="请选择部门"
            :options="controlData.deptTree"
            :show-all-levels="false"
            :props="{ value: 'id', label: 'text', checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">搜索</el-button>
          <el-button
            type="info"
            @click="
              search = {};
              searchQuery();
            "
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="userId"
      :formOptions="{ labelWidth: '120px' }"
      :showView="false"
      :showCheckbox="false"
      menuType="text"
      :isCustomForm="true"
      :modalOptions="{ height: 630 }"
      :textMap="{ add: '创建用户' }"
      formRefs="userInfoForm,personInfoForm"
    >
      <qm-table-column field="loginId">登录帐号</qm-table-column>
      <qm-table-column field="userName">用户名称</qm-table-column>
      <qm-table-column field="userType" sortable>用户类型</qm-table-column>
      <qm-table-column field="departmentName">所属部门</qm-table-column>
      <qm-table-column field="loginCount" sortable>登录次数</qm-table-column>
      <qm-table-column field="lastLoginDate" sortable>最后登录时间</qm-table-column>
      <qm-table-column field="isEnabled" fieldtype="enabledisable">是否启用</qm-table-column>

      <template v-slot:moreBtn="{ row }">
        <el-dropdown>
          <el-button style="padding-left: 7px;" size="mini" type="text">更多</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="resetPwd(row)">重置密码</el-dropdown-item>
            <el-dropdown-item @click.native="setRoles(row)">分配角色</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-slot:form="{ model, models, controlData }">
        <el-tabs style="height: 1100px;">
          <el-tab-pane label="账号信息">
            <el-form
              class="qm-table-form"
              ref="userInfoForm"
              :model="model"
              :rules="rules.userInfo"
              label-width="120px"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="登录账号：" prop="loginId">
                    <el-input v-model="model.loginId" :disabled="pageAction != 'create'"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="用户姓名：" prop="userName">
                    <el-input v-model="model.userName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="pageAction == 'create'">
                <el-col :span="12">
                  <el-form-item label="登录密码：" prop="password">
                    <el-input v-model="model.password" minlength="8" maxlength="20" show-password></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="确认密码：" prop="checkPass">
                    <el-input
                      v-model="model.checkPass"
                      show-password
                      @blur="
                        $event => checkPwd($event.target.value, model.password)
                      "
                    ></el-input>
                    <div v-if="checkPassError" class="el-form-item__error">{{ checkPassError }}</div>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户类型：" prop="userType">
                    <el-select v-model="model.userType">
                      <el-option
                        v-for="item in controlData.userTypes"
                        :key="item.name"
                        :value="item.name"
                        :label="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="选择部门：" prop="departmentId">
                    <el-cascader
                      v-model="model.departmentId"
                      clearable
                      placeholder="请选择"
                      :options="controlData.deptTree"
                      :show-all-levels="false"
                      :props="{
                        value: 'id',
                        label: 'text',
                        checkStrictly: true
                      }"
                    ></el-cascader>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="启用账号：" prop="isEnabled">
                    <el-radio v-model="model.isEnabled" :label="true">是</el-radio>
                    <el-radio v-model="model.isEnabled" :label="false">否</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="锁定账号：" prop="isLocked">
                    <el-radio v-model="model.isLocked" :label="true">是</el-radio>
                    <el-radio v-model="model.isLocked" :label="false">否</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户等级：" prop="userLevel">
                    <el-input v-model="model.userLevel" placeholder="用于工作流选人按用户级别排序"></el-input>(用于工作流选人按用户级别排序)
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人信息">
            <div
              v-if="models.profile.status=='to_be_confirmed'"
              class="el-alert el-alert--warning is-light"
              style="margin-bottom:10px"
            >
              <i class="el-alert__icon el-icon-warning is-big"></i>
              <div class="el-alert__content">
                <span class="el-alert__title is-bold">个人信息确认</span>
                <p class="el-alert__description">当前用户信息尚未确认，请进行确认</p>
              </div>
              <el-row style="right: 10px;position: absolute;">
                <el-button type="success" @click="confirmSave">确认通过</el-button>
                <el-button type="info" @click="confirmBack">退回修改</el-button>
              </el-row>
            </div>
            <el-form
              class="qm-table-form"
              ref="personInfoForm"
              :model="models.profile"
              label-width="120px"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="性别：" prop="gender">
                    <el-radio v-model="models.profile.gender" :label="0">男</el-radio>
                    <el-radio v-model="models.profile.gender" :label="1">女</el-radio>
                  </el-form-item>
                  <el-form-item label="手机号码：" prop="mobile">
                    <el-input v-model="models.profile.mobile"></el-input>
                  </el-form-item>
                  <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="models.profile.email"></el-input>
                  </el-form-item>
                  <el-form-item label="工号：" prop="wkNo">
                    <el-input v-model="models.profile.wkNo"></el-input>
                  </el-form-item>
                  <el-form-item label="门禁号：" prop="employeeNo">
                    <el-input v-model="models.profile.employeeNo"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="8" style="text-align: center;">
                      个人图像：
                      <br />(jpg格式，2M以内)
                    </el-col>
                    <el-col :span="16">
                      <el-upload
                        class="avatar-uploader"
                        :action="getUploadUrl(models.profile.photoUrl)"
                        :show-file-list="false"
                        :on-success="
                          (res, file, fileList) =>
                            handleAvatarSuccess(res, models)
                        "
                        :before-upload="beforeAvatarUpload"
                      >
                        <img
                          style="border: 1px dashed #ccc;border-radius: 6px;"
                          v-if="models.profile.photoUrl"
                          :src="getDownloadUrl(models.profile.photoUrl)"
                          class="avatar"
                        />
                        <i
                          v-else
                          class="el-icon-plus avatar-uploader-icon"
                          style="border: 1px dashed #ccc; border-radius: 6px;"
                        ></i>
                      </el-upload>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证号码：" prop="cardId">
                    <el-input v-model="models.profile.cardId"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生日期：" prop="birthday">
                    <el-date-picker
                      v-model="models.profile.birthday"
                      type="date"
                      default-value="1980-01-01"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="任职职位：" prop="position">
                    <el-input v-model="models.profile.position"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="入职日期：" prop="joinDate">
                    <el-date-picker
                      v-model="models.profile.joinDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="任职状态：" prop="employmentStatus">
                    <el-select v-model="models.profile.employmentStatus" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.employmentOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="转正日期：" prop="confirmationDate">
                    <el-date-picker
                      v-model="models.profile.confirmationDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="职级：" prop="level">
                    <el-select v-model="models.profile.level" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.levelOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态：" prop="status">
                    <el-select v-model="models.profile.status" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.profileStatus"
                        :key="item.key"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="民族：" prop="nation">
                    <el-input v-model="models.profile.nation" placeholder="请输入民族"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="户籍类型：" prop="householdType">
                    <el-select v-model="models.profile.householdType" placeholder="请选择">
                      <el-option
                        v-for="item in controlData.householdTypes"
                        :key="item.key"
                        :label="item.key"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="毕业时间：" prop="graduationTime">
                    <el-date-picker
                      type="date"
                      v-model="models.profile.graduationTime"
                      placeholder="请选择毕业时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职称证书：" prop="vocationalCert">
                    <el-input v-model="models.profile.vocationalCert" placeholder="请输入职称证书"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="紧急联系人：" prop="emergencyContact">
                    <el-input v-model="models.profile.emergencyContact" placeholder="请输入紧急联系人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关系：" prop="emergencyContactRelation">
                    <el-input
                      v-model="models.profile.emergencyContactRelation"
                      placeholder="请输入紧急联系人关系"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="手机号：" prop="emergencyContactMobile">
                    <el-input
                      v-model="models.profile.emergencyContactMobile"
                      placeholder="请输入紧急联系人手机号码"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="籍贯：" prop="nativePlace">
                    <el-input v-model="models.profile.nativePlace" placeholder="请输入籍贯"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="婚姻状况：" prop="maritalStatus">
                    <el-select v-model="models.profile.maritalStatus" placeholder="请选择">
                      <el-option label="未婚" value="UNMARRIED"></el-option>
                      <el-option label="已婚" value="MARRIED"></el-option>
                      <el-option label="离异" value="DIVORCE"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="政治面貌：" prop="politicalStatus">
                    <el-select v-model="models.profile.politicalStatus" placeholder="请选择">
                      <el-option label="群众" value="MASSES"></el-option>
                      <el-option label="团员" value="LEAGUE_MEMBER"></el-option>
                      <el-option label="党员" value="PARTY_MEMBER"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="银行帐号：" prop="bankAccount">
                    <el-input v-model="models.profile.bankAccount" placeholder="请输入银行帐号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="学历：" prop="education">
                    <el-select v-model="models.profile.education" placeholder="请选择">
                      <el-option label="博士" value="DOCTOR"></el-option>
                      <el-option label="硕士" value="MASTER"></el-option>
                      <el-option label="本科" value="UNDERGRADUATE"></el-option>
                      <el-option label="大专" value="JUNIOR"></el-option>
                      <el-option label="高中" value="SENIOR"></el-option>
                      <el-option label="中专" value="SPECIAL"></el-option>
                      <el-option label="初中" value="MIDDLE"></el-option>
                      <el-option label="小学" value="PRIMARY"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="毕业院校：" prop="school">
                    <el-input v-model="models.profile.school" placeholder="请输入毕业院校"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="专业：" prop="speciality">
                    <el-input v-model="models.profile.speciality" placeholder="请输入专业"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="联系地址：" prop="address">
                    <el-input v-model="models.profile.address"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="户口地址：" prop="originalAddress">
                    <el-input v-model="models.profile.originalAddress"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="memo">
                    <el-input type="textarea" v-model="models.profile.memo" :rows="3"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人证照">
            <qm-uploader
              :dataKey="model.userId || ''"
              :categories="['个人证照']"
              :isShowUpload="true"
              :uploadFiles="uploadSuccessFiles"
            ></qm-uploader>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #toolbar>
        <el-button hidden type="success" @click="fullMember">转正登记管理</el-button>
        <el-button icon="el-icon-coordinate" type="info" @click="quit">离职登记管理</el-button>
        <el-button icon="el-icon-guide" type="success" @click="addUser">新增用户向导</el-button>
        <el-button icon="el-icon-notebook-1" type="primary" @click="userView">人事报表</el-button>
      </template>
    </qm-table>
    <el-dialog title="查看分配角色" :visible.sync="dialogUserVisible" @closed="dialogUserClose">
      <el-row>
        <el-col :span="6">
          <el-select
            v-model="searchRoles"
            value-key="value"
            multiple
            filterable
            remote
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
          >
            <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button type="primary" @click="addNew" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>
      <qm-table
        ref="qmTable"
        v-if="dialogUserVisible"
        :urls="{ query: '/admin/sysUser/setRoles/query' }"
        :beforeQuery="beforeQuery"
        :showView="false"
        :showEdit="false"
        :showDelete="false"
      >
        <qm-table-column field="name" sortable>角色名称</qm-table-column>
        <template v-slot:moreBtn="{ row }">
          <el-button @click="move(row)">移除</el-button>
        </template>
      </qm-table>
    </el-dialog>

    <ResetPwd v-model="resetPasswordVisible" :userId="resetPwdUserId" />
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
import QmUploader from "@/libs/components/qm-uploader";
import ResetPwd from "@/views/components/ResetPwd/index";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: [{ url: "/admin/sysUser/query", method: "post" }],
      save: "/admin/sysUser/save",
      delete: "/admin/sysUser/delete",
      entity: "/admin/sysUser/getEntity",
      model: "/admin/sysUser/getListModel",
    };
  }

  onBeforeSave(postModel) {
    if (
      this.$util.isArray(postModel.model.departmentId) &&
      postModel.model.departmentId.length > 0
    ) {
      postModel.model.departmentId =
        postModel.model.departmentId[postModel.model.departmentId.length - 1];
    }

    if (this.vm.pageAction === "create") {
      postModel.attachmentIds = this.vm.uploadSuccessFiles.join(",");
      if (postModel.model.password !== postModel.model.checkPass) {
        return false;
      }
      delete postModel.model.checkPass;
    }

    return true;
  }

  mixin() {
    return {
      components: {
        QmUploader,
        ResetPwd,
      },
      data() {
        return {
          enabledOptions: [
            {
              value: 1,
              label: "启用",
            },
            {
              value: 0,
              label: "禁用",
            },
          ],
          searchDeptId: "",
          // 分配角色
          dialogUserVisible: false,
          // 密码初始化
          resetPasswordVisible: false,
          resetPwdUserId: undefined,
          searchRoles: [],
          roles: [],
          row: {},
          rnd: 0,
          uploadSuccessFiles: [],
          checkPassError: "",
          rules: {
            userInfo: {
              userName: [
                {
                  required: true,
                  message: "请输入名称",
                  trigger: "blur",
                },
              ],
              loginId: [
                { required: true, message: "请输入登录账号", trigger: "blur" },
              ],
              password: [
                {
                  required: true,
                  message:
                    "密码必须同时由字母、数字、特殊符号(不包括_)等8位以上字符组成。",
                  pattern:
                    /([a-zA-z]+\d+\S*\W+\S*)|(\d+[a-zA-z]+\S*\W+\S*)|(\d+\W+\S*[a-zA-z]+\S*)|([a-zA-z]+\W+\S*\d+\S*)|(\W+[a-zA-z]+\S*\d+\S*)|(\W+\d+\S*[a-zA-z]+\ S*)/,
                  trigger: "blur",
                },
              ],
              checkPass: [{ required: true, message: " " }],
            },
            personInfo: {
              mobile: [
                {
                  required: true,
                  message: "请输入手机号",
                  trigger: "blur",
                },
              ],
            },
          },
        };
      },
      watch: {
        searchDeptId(v) {
          if (v && v.length === 1) {
            this.search.departmentId = v[0];
          }
        },
      },
      methods: {
        userView() {
          window.open(
            "http://eip.championsoft.net/report/view/665814278656577536",
            "target"
          );
        },
        fullMember() {
          this.$root.openModal(
            "/smartform/hub/fullMemberList",
            () => {},
            {
              type: "regularWorker",
            },
            { title: "转正登记" }
          );
        },
        quit() {
          this.$root.openModal(
            "/smartform/hub/fullMemberList",
            () => {},
            {
              type: "quit",
            },
            { title: "离职登记" }
          );
        },
        checkPwd(checkPass, password) {
          if (checkPass !== password) {
            this.checkPassError = "两次密码必须一致";
          } else {
            this.checkPassError = "";
          }
        },
        removeFile: function (file, row, $index) {
          this.$confirm("确定删除： " + file.fileName + "？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              row.tableLoading = true;
              request({
                url: "/attachment/remove",
                method: "post",
                data: { attachmentId: file.attachmentId },
              })
                .then((r) => {
                  if (r && r.success) {
                    row.files.splice($index, 1);
                    let idx = _.findIndex(this.uploadSuccessFiles, (item) => {
                      return item.attachmentId === file.attachmentId;
                    });
                    if (idx !== -1) {
                      this.uploadSuccessFiles.splice(idx, 1);
                    }
                    row.tableLoading = false;
                  } else {
                    this.msgError((r || {}).message || "删除失败");
                    row.tableLoading = false;
                  }
                })
                .catch((e) => {
                  row.tableLoading = false;
                });
            })
            .catch(() => {});
        },
        uploadSuccess(attachment) {
          if (this.pageAction === "create") {
            this.uploadSuccessFiles.push(attachment.attachmentId);
          }
        },
        getUploadUrl(attachmentId) {
          return `${
            process.env.VUE_APP_BASE_API
          }/attachment/upload?type=picture&attachmentId=${
            attachmentId || ""
          }&isTemp=${!attachmentId}`;
        },
        getDownloadUrl(attachmentId) {
          return `${
            process.env.VUE_APP_BASE_API
          }/attachment/download?attachmentId=${attachmentId}&rnd=${Math.random()}`;
        },
        handleAvatarSuccess(res, models) {
          models.profile.photoUrl = res.attachmentId;
        },
        beforeAvatarUpload(file) {
          // 控制上传的大小及格式
          // ie不支持const let
          /*const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;*/
          let isJPG = file.type === "image/jpeg";
          let isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error("上传头像图片只能是 JPG 格式!");
          }
          if (!isLt2M) {
            this.$message.error("上传头像图片大小不能超过 2MB!");
          }
          return isJPG && isLt2M;
        },
        addUser() {
          this.$root.openModal(
            "/eip/sysUser/addUser",
            () => {
              this.$refs["qmTable"].refresh();
            },
            null
          );
        },
        proxyLogin(row) {
          request({
            url: "/admin/sysUser/proxyLogin",
            method: "post",
            data: {
              loginId: row.loginId,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                window.location.href = window.location.origin;
              } else {
                reject(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
        move(row) {
          this.$confirm("确定要移除么？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              request({
                url: "/admin/sysRole/removeUser",
                method: "get",
                params: {
                  userId: row.userId,
                  roleId: row.roleId,
                },
              })
                .then((r) => {
                  if (r && !r.initMessage) {
                    this.$message({
                      message: "删除成功",
                      type: "success",
                    });
                    this.$refs["qmTable"].refresh();
                  } else {
                    reject(r.initMessage || "数据请求失败");
                  }
                })
                .catch((e) => {
                  reject(e);
                });
              this.$refs["qmTable"].refresh();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        },
        addNew() {
          if (null == this.searchRoles || this.searchRoles.length == 0) {
            this.$message("请先选择授予的角色!");
            return;
          }
          request({
            url: "/admin/sysUser/addUserRoles",
            method: "post",
            data: {
              userId: this.row.userId,
              roles: this.searchRoles,
            },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.$refs["qmTable"].refresh();
              } else {
                reject(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
        remoteMethod(query) {
          request({
            url: "/admin/sysUser/setRoles/roleSelect2",
            method: "get",
            params: { term: query },
          })
            .then((r) => {
              if (r && !r.initMessage) {
                this.roles = r.records.map((m) => {
                  return {
                    value: m.roleId,
                    label: m.name,
                    roleId: m.roleId,
                  };
                });
              } else {
                reject(r.initMessage || "数据请求失败");
              }
            })
            .catch((e) => {
              reject(e);
            });
        },
        beforeQuery(parmas) {
          parmas.query.userId = this.row.userId;
        },
        //重置密码
        resetPwd(row) {
          this.resetPwdUserId = row.userId;
          this.resetPasswordVisible = true;
        },
        //分配角色
        setRoles(row) {
          this.row = row;
          this.remoteMethod();
          this.dialogUserVisible = true;
        },
        dialogUserClose() {
          this.dialogUserVisible = false;
          this.searchRoles = [];
          this.roles = [];
          this.row = {};
        },
        confirmSave() {
          this.$confirm("确认个人信息通过嘛？")
            .then(() => {
              this.$refs.qmTable.viewModel.models.profile.status = "confirmed";
              this.$refs.qmTable.submitForm();
            })
            .catch(() => {});
        },
        confirmBack() {
          this.$prompt("请输入退回原因", "提示", {
            confirmButtonText: "退回",
            cancelButtonText: "取消",
            inputErrorMessage: "请填写退回原因",
            inputValidator: (v) => {
              return v != undefined;
            },
          })
            .then(({ value }) => {
              this.$refs.qmTable.viewModel.models.profile.reserved3 = value;
              this.$refs.qmTable.viewModel.models.profile.status = "not_filled";
              this.$refs.qmTable.submitForm();
            })
            .catch(() => {});
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader {
  padding-bottom: 5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
</style>
